<template>
  <div >
    <el-row :gutter="20">
    <!--  <el-col :span="24">
        <div class="lay1">
          <div class="grid-content bg-purple-dark">
            <div class="demo-image">
              <el-image style="width: 200px; height: 96px" :src="url"></el-image>
            </div>
          </div>
        </div>
      </el-col>-->
      <el-container>
        <el-aside width="200px"></el-aside>
        <el-main>


      <el-col :span="24">
        <div class="lay2">
          <el-row :gutter="20">
            <el-col :span="2"><div class="grid-content1 bg-purple1"></div></el-col>
            <el-col :span="6"><div class="grid-content2 bg-purple2">
              <div>
                <font style="text-align: left" size="4">推荐</font>
              </div>
              <div>
                <el-button>推荐歌手</el-button>
              </div>
              <div>
                <el-button>入驻歌手</el-button>
              </div>
              <el-divider></el-divider>
              <div>
                <font size="4" >华语</font>
              </div>
              <div>
                <el-button>华语男歌手</el-button>
              </div>
              <div>
                <el-button>华语女歌手</el-button>
              </div>
              <div>
                <el-button>华语组合/乐队</el-button>
              </div>
              <el-divider></el-divider>
              <div>
                <font size="4" >欧美</font>
              </div>
              <div>
                <el-button>欧美男歌手</el-button>
              </div>
              <div>
                <el-button>欧美女歌手</el-button>
              </div>
              <div>
                <el-button>欧美组合/乐队</el-button>
              </div>
              <el-divider></el-divider>
              <div>
                <font size="4" >日本</font>
              </div>
              <div>
                <el-button>日本男歌手</el-button>
              </div>
              <div>
                <el-button>日本女歌手</el-button>
              </div>
              <div>
                <el-button>日本组合/乐队</el-button>
              </div>
              <el-divider></el-divider>
              <div>
                <font size="4" >韩国</font>
              </div>
              <div>
                <el-button>韩国男歌手</el-button>
              </div>
              <div>
                <el-button>韩国女歌手</el-button>
              </div>
              <div>
                <el-button>韩国组合/乐队</el-button>
              </div>
              <el-divider></el-divider>
              <div>
                <font size="4" >其他</font>
              </div>
              <div>
                <el-button>其他男歌手</el-button>
              </div>
              <div>
                <el-button>其他女歌手</el-button>
              </div>
              <div>
                <el-button>其他组合/乐队</el-button>
              </div>
            </div></el-col>
            <el-col :span="14"><div class="grid-content3 bg-purple3">
              <font style="text-align: left" size="6">入驻歌手</font>
              <el-divider content-position="right"><el-button>更多</el-button></el-divider>
              <el-col :span="24">
                <div>
                  <el-row gutter="20">
                    <el-col :span="4" v-for="(o, index) in 8" :key="o" :offset="index > 0 ? 1 : 1">
                      <el-card :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                        <div style="padding: 20px;">
                          <span>好吃的汉堡</span>
                          <div class="bottom clearfix">
                            <el-button type="text" class="button">操作按钮</el-button>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-col>

              <font style="text-align: left" size="6">热门歌手</font>
              <el-divider content-position="right"><el-button>更多</el-button></el-divider>

              <el-col :span="24">
                <div>
                  <el-row gutter="20">
                    <el-col :span="4" v-for="(o, index) in 16" :key="o" :offset="index > 0 ? 1 : 1">
                      <el-card :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                        <div style="padding: 0px;">
                          <span>好吃的汉堡</span>
                          <div class="bottom clearfix">
                            <el-button type="text" class="button">操作按钮</el-button>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-col>

            </div></el-col>
            <el-col :span="2"><div class="grid-content4 bg-purple4"></div></el-col>
          </el-row>
        </div>
      </el-col>

        </el-main>
        <el-aside width="200px"></el-aside>
      </el-container>
    </el-row>


  </div>


</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-col {
  border-radius: 0px;
}
.bg-purple-dark {
  background: black;
  height: 100px;
}




/*.grid-content1 {
  height: 1600px;
  background-color: white;
}*/
.grid-content2 {
  height: 1600px;
  width: 200px;
  background-color: azure;
}
.grid-content3 {
  height: 1600px;
  width: 800px;
  background-color: white;
}
/*.grid-content4 {
  height: 1600px;
  background-color: white;
}*/
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
